<template>
  <view class="container">
    <!-- 任务标题 -->
    <view class="task-info">
      <!-- 列表项 Start -->
      <!-- 任务未完成 -->
      <view v-for="(item, index) in unDoneTaskList" :key="index">
        <!-- 任务标题 -->
        <view v-if="item.unfinish.length > 0" class="task-date">
          {{ item.time | formatDate("yyyy-MM-dd") }}
        </view>
        <!-- 未完成任务列表 -->
        <view
          class="task-item"
          v-for="unfinish in item.unfinish"
          :key="unfinish.wid"
          @click="checkTask(unfinish.wid)"
        >
          <view class="item-left">
            <checkbox
              :value="unfinish.wid"
              :checked="unfinish.w_status == 0 ? false : true"
              @click.stop="checkboxChange(1, unfinish.wid, item.time)"
            />
          </view>
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ unfinish.w_name }}</text>
            <text>{{ unfinish.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ unfinish.w_remind | formatDate("hh:mm") }}
            </text>
          </view>
        </view>
      </view>
      <!-- 任务已完成 -->
      <view v-if="isShowDoneText" class="task-date"> 已完成 </view>
      <view v-for="(item, index) in doneTaskList" :key="index">
        <!-- 任务标题 -->
        <view v-if="item.finish.length > 0" class="task-date">
          {{ item.time | formatDate("yyyy-MM-dd") }}
        </view>
        <!-- 已完成任务列表 -->
        <view
          class="task-item"
          v-for="finish in item.finish"
          :key="finish.wid"
          @click="checkTask(finish.wid)"
        >
          <view class="item-left">
            <checkbox
              :value="finish.wid"
              :checked="unfinish.w_status == 0 ? false : true"
              @click.stop="checkboxChange(0, finish.wid, item.time)"
            />
          </view>
          <!-- 任务名称 -->
          <view class="item-center">
            <text>{{ finish.w_name }}</text>
            <text>{{ finish.w_label }}</text>
          </view>
          <!-- 任务时间 -->
          <view class="item-right">
            <text class="task-time">
              {{ finish.w_remind | formatDate("hh:mm") }}
            </text>
          </view>
        </view>
      </view>
      <!-- 列表项 End -->
    </view>
  </view>
</template>

<script>
// 引入接口文件
const {
  getCollectWorkList,
  changeWorkStatus,
} = require("../../api/user/collection");

export default {
  props: {},
  components: {},
  data() {
    return {
      isShowDoneText: false, // 是否显示已完成文字
      taskList: [], // 收藏任务项数据
    };
  },
  computed: {
    // 未完成的任务
    unDoneTaskList() {
      let unDoneTaskList = [];
      this.taskList.forEach(item => {
        if (!item.unfinish) item.unfinish = [];
        if (!item.finish) item.finish = [];

        let obj = {
          time: item.time,
          arr1: item.unfinish.filter(item => item.w_status == 0),
          arr2: item.finish.filter(item => item.w_status == 0),
        };
        obj.unfinish = [...obj.arr1, ...obj.arr2];
        unDoneTaskList.push(obj);
      });
      return unDoneTaskList;
    },
    // 已完成的任务
    doneTaskList() {
      let doneTaskList = [];
      this.taskList.forEach(item => {
        if (!item.unfinish) item.unfinish = [];
        if (!item.finish) item.finish = [];

        let obj = {
          time: item.time,
          arr1: item.unfinish.filter(item => item.w_status == 1),
          arr2: item.finish.filter(item => item.w_status == 1),
        };
        obj.finish = [...obj.arr1, ...obj.arr2];
        doneTaskList.push(obj);
      });

      let flag = false;
      for (let i = 0; i < doneTaskList.length; i++) {
        if (flag == false)
          flag = doneTaskList[i].finish.length > 0 ? true : false;
      }
      // 是否显示已完成文字
      this.isShowDoneText = flag;
      return doneTaskList;
    },
  },
  watch: {},
  methods: {
    // 更改任务状态
    checkboxChange(status, wid, taskTime) {
      let taskType = "unfinish";
      let index = -1;

      for (let i = 0; i < this.taskList.length; i++) {
        // 如果找到日期才继续往下找
        if (this.taskList[i].time == taskTime) {
          taskType = "unfinish";
          index = this.taskList[i]["unfinish"].findIndex(item => {
            return item.wid == wid;
          });
          if (index == -1) {
            taskType = "finish";
            index = this.taskList[i]["finish"].findIndex(item => {
              return item.wid == wid;
            });
          }
          console.log(this.taskList[i], taskType, index, status);
          if (index != -1) {
            // 更改任务状态请求
            changeWorkStatus({ wid }).then(res => {
              this.taskList[i][taskType][index].w_status = status;
            });
            break; // 跳出循环
          }
        }
      }
    },
    // 查看任务
    checkTask(wid) {
      if (wid == "") return;
      uni.navigateTo({
        url: "../addtask/addtask?uuid=" + wid,
      });
    },
    // 获取任务数据
    getTaskList() {
      let params = {
        code: uni.getStorageSync("openId"),
      };
      getCollectWorkList(params).then(
        res => {
          this.taskList = res ? res : [];
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
          this.taskList = [];
        }
      );
    },
  },
  onLoad() {
    // 获取数据
    this.getTaskList();
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.task-info {
  margin-top: 10rpx;
  padding: 0 30rpx;

  .task-date {
    padding: 20rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .task-item {
    display: flex;
    position: relative;
    margin-bottom: 20rpx;
    padding: 30rpx 20rpx 30rpx 0;
    background-color: #fff;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 12rpx;
      height: 40rpx;
      background-color: #666ee8;
    }

    .item-left {
      width: 10%;

      & > checkbox {
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translateY(-50%);
      }
    }

    .item-center {
      flex: 1;
      display: flex;
      padding: 0 20rpx;
      flex-direction: column;
      width: 466rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;

      & text:first-child {
        color: #333333;
      }

      & text:last-child {
        font-size: 24rpx;
        color: #cccccc;
      }
    }

    .item-right {
      position: relative;
      width: 110rpx;

      .task-time {
        position: absolute;
        top: 0;
        height: 48rpx;
        padding: 8rpx 20rpx;
        line-height: 32rpx;
        background-color: #f2f2f2;
        border-radius: 24rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }

  .edit-task {
    width: 90%;
    padding-left: 20rpx;

    .edit-check-box {
      position: absolute;
      top: 50%;
      right: -10%;
      width: 10%;
      transform: translateY(-50%);
      text-align: right;
    }
  }
}
</style>
